feat: Add 'Add & Run' button to command approval UI #5292
Conversation
- Add third button option to command approval dialog - Implement streamlined whitelisting workflow that adds command to whitelist and executes it - Update UI to show three buttons: 'Run Command', 'Add & Run', and 'Reject' - Add backend logic to detect 'Add & Run' selection and update allowedCommands setting - Enhance message passing system to support tertiary button interactions Fixes #5290
dosubot
bot
added
size:L
|
✅ No security or compliance issues detected. Reviewed everything up to 82c3e92. Security Overview
Detected Code ChangesThe diff is too large to display a summary of code changes. Reply to this PR with |
hannesrudolph
added
the
Issue/PR - Triage
hannesrudolph
left a comment
hannesrudolph
left a comment
There was a problem hiding this comment.
Thanks for implementing the 'Add & Run' feature! The UI implementation looks good, but there's a critical issue with how commands are being whitelisted that needs to be addressed.
Critical Issue
The current implementation adds the entire command with arguments to the whitelist (e.g., "gh pr checkout 1234"), but this defeats the purpose of intelligent whitelisting. Each variation of the same command would require separate approval:
gh pr checkout 1234gh pr checkout 5678npm install expressnpm install react
Instead, we should be whitelisting command patterns that can be validated using prefix matching, aligning with how validateCommand already works.
Suggested Approach
Consider extracting the base command pattern before whitelisting. Here's a rough idea:
function extractBaseCommand(fullCommand: string): string {
// Parse command to extract the base pattern
// e.g., "gh pr checkout 1234" -> "gh pr checkout"
// e.g., "npm install express" -> "npm install"
const parts = fullCommand.trim().split(/\s+/);
// This is simplified - you'd want more sophisticated parsing
// to handle different command structures
if (parts[0] === 'gh' && parts[1] === 'pr') {
return parts.slice(0, 3).join(' ');
}
// ... more patterns
return parts.slice(0, 2).join(' ');
}Other Issues
- Code duplication: The approval logic is duplicated between
executeCommandTool.tsandpresentAssistantMessage.ts - Error handling: Missing null checks when dereferencing the provider
- i18n: User-facing messages need internationalization
- Type safety: Consider stricter typing for the response handling
The feature itself is valuable and the three-button UI is well-implemented. With these changes, particularly the command pattern extraction, this will be a great addition to improve the user experience!
src/core/tools/executeCommandTool.ts
Outdated
|
|
||
| // Add command to whitelist if not already present | ||
| if (!currentCommands.includes(command)) { | ||
| const newCommands = [...currentCommands, command] |
There was a problem hiding this comment.
This implementation whitelists the entire command including arguments (e.g., "gh pr checkout 1234"), but shouldn't we be whitelisting just the base command pattern (e.g., "gh pr checkout")?
The current approach defeats the purpose of intelligent whitelisting since each specific command with different arguments would need separate approval. For example:
gh pr checkout 1234gh pr checkout 5678gh pr checkout 9999
Would all be treated as different commands requiring individual whitelisting.
Could we extract the base command pattern before adding to the whitelist? The validateCommand function in webview-ui/src/utils/command-validation.ts already uses prefix matching, so we should align with that approach.
| } | ||
|
|
||
| // Check if user selected "Add & Run" to add command to whitelist | ||
| if (response === "addAndRunButtonClicked") { |
There was a problem hiding this comment.
This duplicates the approval logic from presentAssistantMessage.ts. Could we refactor to reuse the existing askApproval function instead?
The duplication could lead to maintenance issues if the approval flow needs to be updated in the future. Consider extracting the whitelist addition logic into a shared function that both places can call.
src/core/tools/executeCommandTool.ts
Outdated
| // Check if user selected "Add & Run" to add command to whitelist | ||
| if (response === "addAndRunButtonClicked") { | ||
| const clineProvider = await cline.providerRef.deref() | ||
| if (clineProvider) { |
There was a problem hiding this comment.
Missing error handling here. What happens if providerRef.deref() returns undefined? The code continues to line 68 and would throw an error when trying to call getState() on undefined.
Consider adding proper error handling or early return:
if (!clineProvider) {
// Log error or handle gracefully
return;
}
src/core/tools/executeCommandTool.ts
Outdated
| await clineProvider.postMessageToWebview({ | ||
| type: "invoke", | ||
| invoke: "setChatBoxMessage", | ||
| text: `Command "${command}" added to whitelist.`, |
There was a problem hiding this comment.
This user-facing message should be internationalized. Consider using the t() function:
text: t('command.whitelist_added', { command }),Also, is "whitelist" the best user-facing term here? Maybe "allowed commands" or "trusted commands" would be clearer?
There was a problem hiding this comment.
Since we're duplicating the approval logic in executeCommandTool.ts, could we extract a shared function here that handles the command approval flow? This would help maintain consistency and reduce code duplication.
For example:
export async function handleCommandApproval(
cline: Cline,
command: string,
options?: { allowWhitelist?: boolean }
): Promise<{ approved: boolean; addToWhitelist?: boolean }>
- Use extractCommandPattern function to extract base command patterns - Add proper error handling for providerRef.deref() - Use internationalization for user-facing messages - Extract addCommandToWhitelist helper function to reduce duplication - Add comments explaining why we can't use the shared askApproval function
- Added 'executeCommand.patternAddedToWhitelist' translation to all 17 non-English locale files - This fixes the failing check-translations CI job
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper Catalan translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "El patró de comanda \"{{pattern}}\" s'ha afegit a la llista de comandes permeses." |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper German translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "Kommandomuster \"{{pattern}}\" wurde zur Liste der erlaubten Befehle hinzugefügt." |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper Spanish translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "El patrón de comando \"{{pattern}}\" ha sido añadido a la lista de comandos permitidos." |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper French translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "Le modèle de commande \"{{pattern}}\" a été ajouté à la liste des commandes autorisées." |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper Hindi translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "कमांड पैटर्न \"{{pattern}}\" को अनुमत कमांड सूची में जोड़ दिया गया है।" |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper Russian translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "Шаблон команды \"{{pattern}}\" был добавлен в список разрешённых команд." |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper Turkish translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "Komut deseni \"{{pattern}}\" izin verilen komutlar listesine eklendi." |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper Vietnamese translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "Mẫu lệnh \"{{pattern}}\" đã được thêm vào danh sách lệnh được phép." |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper Simplified Chinese translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "命令模式 \"{{pattern}}\" 已被添加到允许的命令列表中。" |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
| }, | ||
| "executeCommand": { | ||
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." |
There was a problem hiding this comment.
The new translation key 'executeCommand.patternAddedToWhitelist' remains in English. Please provide a proper Traditional Chinese translation.
| "patternAddedToWhitelist": "Command pattern \"{{pattern}}\" has been added to the allowed commands list." | |
| "patternAddedToWhitelist": "指令模式 \"{{pattern}}\" 已加入允許的指令清單。" |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
…action - Updated shell-quote from v1.8.2 to v1.8.3 in webview-ui - Added shell-quote v1.8.3 to backend dependencies - Updated shared extract-command-pattern module to use shell-quote for proper parsing - Added @types/shell-quote for TypeScript support - Ensures consistent command pattern extraction across frontend and backend
Summary
This PR implements the 'Add & Run' button feature requested in issue #5290. The feature adds a third button to the command approval dialog that allows users to both whitelist a command and execute it in a single action, streamlining the workflow for users with auto-approve mode enabled.
Changes Made
Backend Implementation
ClineAskResponsetype insrc/shared/WebviewMessage.tsto include'addAndRunButtonClicked'optionpresentAssistantMessage.tsto handle both'yesButtonClicked'and'addAndRunButtonClicked'as approval responses in theaskApprovalfunctionexecuteCommandTool.tsto properly detect when 'Add & Run' was selected and add the command to the whitelist using the correct API methodstertiaryButtonClicktoExtensionMessagetype insrc/shared/ExtensionMessage.tsUI Implementation
ChatView.tsxto support three buttons with conditional renderingtertiaryButtonTextstate variable to support the third buttonTechnical Details
askApprovalfunction that returns boolean values, with actual response captured viacline.ask()methodExtensionMessageandWebviewMessagetypesvalidateCommandfunction withallowedCommandsarrayClineProvider.setValue()method to persist whitelist changesTesting
User Experience
The new workflow allows users to:
This eliminates the need to manually navigate to settings after approving frequently used commands, significantly improving the user experience for users with auto-approve mode enabled.
Fixes #5290
Important
Adds 'Add & Run' button to command approval UI, allowing users to whitelist and execute commands in one step, with backend and UI updates.
presentAssistantMessage.tsto handle 'addAndRunButtonClicked' response.executeCommandTool.tsto detect 'Add & Run' selection and add command to whitelist.ChatView.tsxto support three-button layout: 'Run', 'Add & Run', 'Reject'.tertiaryButtonTextstate for third button.ClineAskResponseinWebviewMessage.tsto include 'addAndRunButtonClicked'.tertiaryButtonClicktoExtensionMessageinExtensionMessage.ts.extractCommandPattern()tocommand-validation.tsfor command whitelisting.This description was created by
for 82c3e92. You can customize this summary. It will automatically update as commits are pushed.